<template>
  <view class="wrap">
    <scroll-view class="tab-scroll" scroll-x="true">
      <view class="tab-box h-100 w-full px-32 fs-26">
        <text v-for="(item,index) in riskTabList" :key="index" :class="{'active':tabIndex === index}" @click="changeTab(index)">
          {{item.label}}
        </text>
      </view>
    </scroll-view>
    <view class="content">
      <view class="risk-box" ref="riskBox">
        <!-- 天狼星,紫薇星，  -->
        <view v-if="['tl_risk','ziwe_risk'].indexOf(tabItem.riskKey)>=0">
          <image v-if="url" :src="url" mode="widthFix"  @click="previewImage(url)"></image>
  <!--        空数据-->
          <view v-if="!url" class="first-tip">
              首次生成<text style="color: red">{{tabItem.label}}</text>
              风控报告，会产生<text style="color: red">费用</text>，
              点击下方生成报告按钮，即可获取风控报告。
          </view>
        </view>
        <!-- 司法列表 -->
        <view v-else-if="['law_list_risk','law_data_risk'].indexOf(tabItem.riskKey)>=0">
          <riskJudiciary :tabItem="tabItem" :nowItem="nowItem" @refresh="getIndex"></riskJudiciary>
        </view>
      </view>
    </view>

    <!-- 天狼星,紫薇星，流水报告-->
    <view v-if="riskShow" class="footer">
      <view class="btn">
        <!-- 更新按钮：判断每个风控：是不是第一次生成报告（显示不同文案）-->
        <view v-for="item in riskTabList" :key="item.riskKey">
          <view class="btn-color" v-if="item.value==tabItem.value" @click="$refs.popModel.open()">
            {{nowItem.risk_status[item.riskKey]===1?'更新报告':'首次生成报告'}}
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="popModel" type="center"
               :maskClick="false"
               border-radius="10px 10px 0 0">
      <view class="pop-box">
        <view class="title">提示</view>
        <view class="content">
          是否更新
          <text style="color:red">{{tabItem.label}}</text>
          ？获取最新报告，本次更新会产生<text style="color:red">费用</text>。
        </view>
        <view class="btn-box">
          <view class="btn cancel" @click="$refs.popModel.close()">取消</view>
          <view class="btn confirm" @click="getNewRisk">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  getAdminOrderDetail,
  getAdminRefundDetail,
  getNewRisk,
  getRisk,
  getStoreOrderDetail,
  getStoreRefundDetail
} from "../../../api/admin";
import UniPopup from "../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import RiskJudiciary from "../components/riskJudiciary.vue";

export default {
  components: {RiskJudiciary, UniPopup},
  data() {
    return {
      nowItem:{},
      riskTabList:[
        {
          label:'天狼星',
          value:1,
          riskKey:'tl_risk'
        },
        {
          label:'紫薇星',
          value:2,
          riskKey:'ziwe_risk'
        },
        {
          label:'流水报告',
          value:8,
          riskKey:'flow_risk'
        },
        {
          label:'司法数据（简版）',
          value:6,
          riskKey:'law_list_risk'
        },
        {
          label:'司法数据（详版）',
          value:5,
          riskKey:'law_data_risk'
        },
      ],
      tabIndex:0,
      tabItem:{
        label:'天狼星',
        value:1,
        riskKey:'tl_risk'
      },
      url:'',
      tipShow:false,
      statusType:'',
      order_id:'',
      testNum:0
    }
  },
  onLoad(options){
    if(options.order_id){
      this.statusType=options.statusType
      this.order_id=options.order_id
      // this.getIndex()
    }
  },
  onShow(){
    this.getIndex()
  },
  computed: {
    riskShow(){
      return ['tl_risk','ziwe_risk'].indexOf(this.tabItem.riskKey)>=0
    }
  },
  methods:{
    previewImage(urls) {
      uni.previewImage({
        current: urls,
        urls: [urls]
      });
    },
    getIndex: function() {
      let that = this;
      let obj = '';
      if (that.statusType == -3) {
        let funApi = '';
        if(this.storeNum){
          funApi = getAdminRefundDetail(that.order_id);
        }else{
          funApi = getStoreRefundDetail(that.order_id);
        }
        obj = funApi;
      } else {
        let funApi = '';
        if(this.storeNum){
          funApi = getAdminOrderDetail(that.order_id);
        }else{
          funApi = getStoreOrderDetail(that.order_id);
        }
        obj = funApi;
      }
      uni.showLoading({
        title: '加载中',
      })
      obj.then(res => {
        uni.hideLoading()
        that.nowItem = res.data;

        // todo 测试首次生成报告
        // if(this.testNum===0){
        //   this.nowItem.risk_status.law_data_risk=0
        //   this.testNum++
        // }

        if(this.nowItem.risk_status.tl_risk===1){
          this.getRisk()
        }
      })
    },
    changeTab(index) {
      this.tabIndex=index
      this.tabItem=this.riskTabList[index]
      this.url=''


      // 如果首次生成报告。则不请求接口 ,排除流水报告
      if(this.nowItem.risk_status[this.tabItem.riskKey]===0&&this.tabItem.riskKey!=='flow_risk'){
        return
      }
      // 司法列表，司法数据v2
      if(this.tabItem.value===5||this.tabItem.value===6) return;
      this.getRisk()
    },
    // 获取报告
    getRisk(){
      uni.showLoading({
        title: '更新报告中',
      })
      getRisk({
        uid:this.nowItem.uid,
        order_id:this.nowItem.id,
        type:this.tabItem.value
      }).then(res=>{
        uni.hideLoading()
        if(res.status===200){
          this.setRiskUrl(res)
        }
      })
    },
    // 更新报告
    getNewRisk(){
      uni.showLoading({
        title: '更新报告中',
      })
      getNewRisk({
        uid:this.nowItem.uid,
        order_id:this.nowItem.id,
        type:this.tabItem.value
      }).then(res=>{
        if(res.status===200){
          this.$util.Tips({
            title:'更新成功'
          })
          this.setRiskUrl(res)
        }
        this.getIndex()
      }).finally(()=>{
        this.$refs.popModel.close()
        uni.hideLoading()
      })
    },

    setRiskUrl(res){
      this.url=res.data.url
      // 流水报告
      if(this.tabItem.riskKey==='flow_risk'){
        this.url=res.data.reportURL
        if(this.url){
          uni.navigateTo({
            url: `/pages/annex/web_view/index?url=${this.url}`
          });
          // 重置tab
          this.tabIndex=0
          this.tabItem={
            label:'天狼星',
            value:1,
            riskKey:'tl_risk'
          }
        }else{
          this.$util.Tips({
            title:'暂无流水报告'
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 100rpx;
}
.tab-scroll{
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  background: #fff;
  /* #ifdef H5 */
  top: var(--window-top); // 使用uniapp内置变量（推荐）
  /* #endif */
  .tab-box{
    display: flex;
    align-items: center;
    text{
      padding-right: 50rpx;
      white-space: nowrap;
    }
    .active {
      color: #1496f9 !important;
      font-weight: bold;
      font-size: 30rpx !important;
    }
  }
}
.btn-color{
  white-space: nowrap;
  padding: 0 24rpx;
  height: 56rpx;
  line-height: 54rpx;
  text-align: center;
  border-radius: 28rpx;
  font-size: 24rpx;
  color: #fff;
  transform: rotateZ(360deg);
  background: #1497fa;
}

.content{
  image{
    width: 100%;
  }
  .first-tip{
    padding: 0 60rpx;
    position: absolute;
    top: 40%;
  }
}

.footer{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100upx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 0 30upx;
  border-top: 1px solid #eee;
  height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  padding-bottom: calc(0rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}

.pop-box{
  width: 90vw;
  max-height: 66vh;
  padding: 30rpx;
  border-radius: 28rpx;
  background: #fff;
  .title{
    font-size: 30rpx;
    margin-bottom: 30rpx;
    font-weight: bold;
  }
  .content{
    .item{
      display: flex;
      align-items: flex-start;
      margin-bottom: 30rpx;
      .label{
        white-space: nowrap;
        flex: 0 0 160rpx;
        line-height: 52rpx;
      }
      .r{
        flex:1;
        padding-right: 30rpx;
      }
    }
  }
  .btn-box{
    display: flex;
    justify-content: center;
    margin-top: 30rpx;
    .btn{
      padding: 0 50rpx;
      line-height: 60rpx;
      border-radius: 28rpx;
    }
    .cancel{
      color: #333;
      border: 1rpx solid #CCCCCC;
      margin-right: 30rpx;
    }
    .confirm{
      color: #fff;
      background: #1497fa;
    }
  }
}
</style>